<script setup>
	import { onLoad } from '@dcloudio/uni-app'
	import { ref } from 'vue'
	
	const config = getApp().globalData.config
	const appInfo = uni.getSystemInfoSync()
	const loading = ref(false)
	const updateManager = uni.getUpdateManager()
	const status = ref(0)
	
	function checkVerison() {
		updateManager.applyUpdate()
	}
	
	onLoad(() => {
		updateManager.onCheckForUpdate((res) => {
			status.value = res.hasUpdate? 1 : 0
		})
		updateManager.onUpdateReady(() => {
			status.value = 2
		})
	})
</script>

<template>
	<view class="app-container">
		<view class="app-head">
			<image :src="config.appInfo.logo" class="head-icon" mode="aspectFill"></image>
			<text class="head-text">{{config.appInfo.name}}</text>
			<view class="head-version">版本号：{{appInfo.appVersion}}</view>
		</view>
		<view class="app-content">
			<view class="func-nav">
				<text>检查新版本</text>
				<div class="version-new" v-if="status === 1">有新版*</div>
				<div class="version-update" v-else-if="status === 2" @click="checkVerison">更新到最新版</div>
				<div class="version-ready" v-else>当前已是最新版</div>
			</view>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.app-container{
		padding-top: 48rpx;
		.app-head{
			display: flex;
			flex-direction: column;
			align-items: center;
			font-weight: 600;
			.head-icon{
				width: 176rpx;
				height: 176rpx;
				border-radius: 36rpx;
				background-color: #faf7f7;
			}
			.head-text{
				margin-top: 24rpx;
				font-size: var(--theme-xxl);
			}
			.head-version{
				margin-top: 12rpx;
			}
		}
		.app-content{
			margin: 48rpx 24rpx 0 24rpx;
			padding: 0 24rpx;
			background-color: #FFFFFF;
			border-radius: 24rpx;
			.func-nav{
				padding: 24rpx 0;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.version-new{
					color: $uv-primary;
					font-size: var(--theme-sm);
				}
				.version-update{
					background-color: $uv-success;
					color: #FFFFFF;
					padding: 6rpx 12rpx;
					border-radius: 16rpx;
					font-size: var(--theme-sm);
				}
				.version-ready{
					color: #c0c4cc;
					font-size: var(--theme-sm);
				}
			}
			.func-nav + .func-nav {
				border-top: 2rpx solid #D7DBE1;
			}
		}
	}
</style>